<template>
  <div class="homes">
    <h1>首页</h1>

    <el-button @click="open">测试按钮点击事件</el-button>

    <div>{{ msg }}</div>

    <el-checkbox
      v-model="item.checked"
      @change="checkboxChange(item)"
      v-for="(item, index) in actionSheetList"
      :key="index"
      :label="item.nickName"
    >
      {{ item.nickName }}
    </el-checkbox>

    <div style="width: 200px; height: 500px; background: #999; overflow: auto">
      <div v-for="(e, i) in arrs" :key="i">
        {{ e.name }}
      </div>
    </div>

    <div
      id="main"
      style="
        width: 90%;
        height: 400px;
        border: 1px solid pink;
        background: #183656;
      "
    ></div>

    <!-- <div style="color: #918f8f" @click="clickFun">
      {{ isFullFlag ? '退出全屏' : '全屏' }}
    </div> -->
  </div>
</template>

<script>
// import Screenfull from 'screenfull'
// import { cascaderList } from '../api/blackoutControl.js'
import { getRnumRepetition, randomNum, getInitTime } from '../../utils/utils.js'
import { mapState } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'home',
  components: {},
  props: {},
  data() {
    return {
      isFullFlag: false,
      arrs: [],
      actionSheetList: null,
      personNames: null,
      msg: null,
    }
  },
  computed: {
    ...mapState(['login']),
  },
  watch: {},
  created() {
    function myObj(fn) {
      const obj = {}
      obj._proto_ = fn.prototype
      fn.apply(fn)
      return obj
    }

    // console.log('myObj', myObj())
    // console.log('getRnumRepetition', getRnumRepetition(200))
    // console.log('randomNum', randomNum(1, 12))
    // console.log('$test', this.test)
  },
  mounted() {
    // 监听页面全屏
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 退出全屏后要执行的动作
        console.log('退出全屏')
        // this.isFullscreen = Screenfull.isFullscreen
      }
    }

    this.initEchart1()

    this.getList()
  },
  methods: {
    open() {
      const ids = '2,4'
      const data = [
        { name: 'name1', id: 1 },
        { name: 'name2', id: 2 },

        { name: 'name3', id: 3 },
        { name: 'name4', id: 4 },
      ]
      const d = []

      data.map((e) => {
        if (ids.includes(e.id)) {
          d.push(e.name)
        }
      })
      this.msg = d
      console.log('d', d)
    },

    open2() {
      const arr = []
      for (let i = 0; i < 40; i++) {
        // 循环添加十万条数据
        arr.push({
          fuserId: 'fuserId' + i,
          nickName: '名字' + i,
          value: 'value' + i,
          form: 'form' + i,
          checked: false,
        })
      }
      this.actionSheetList = arr
    },

    open1() {
      this.$notify({
        showClose: false,
        message: '请输入退回原因',
        type: 'error',
        // offset: 300,
        position: 'top',
      })
    },

    checkboxChange(item) {
      console.log('item', item.checked, item.fuserId)

      const arr = []
      this.actionSheetList.map((e) => {
        if (e.checked) {
          arr.push(e.fuserId)
        }
      })
      this.personNames = arr
      console.log('this.personNames-2', this.personNames.toString())
    },

    getList() {
      let arr = [] // 定义数组，存放十万条数据
      for (let i = 0; i < 20; i++) {
        // 循环添加十万条数据
        arr.push({
          id: i + 1,
          name: '名字' + (i + 1),
          value: i + 1,
        })
      }

      let twoDArr = this.averageFn(arr)
      for (let i = 0; i < twoDArr.length; i++) {
        // 相当于在很短的时间内创建许多个定时任务去处理
        setTimeout(() => {
          this.arrs = [...this.arrs, ...twoDArr[i]] // 赋值渲染
        }, 1000 * i * 2) // 17 * i // 注意设定的时间间隔... 17 = 1000 / 60
      }
    },

    averageFn(arr) {
      let i = 0 // 1. 从第0个开始截取
      let result = [] // 2. 定义结果，结果是二维数组
      while (i < arr.length) {
        // 6. 当索引等于或者大于总长度时，即截取完毕
        // 3. 从原始数组的第一项开始遍历
        result.push(arr.slice(i, i + 2)) // 4. 在原有十万条数据上，一次截取10个用于分堆
        i = i + 2 // 5. 这10条数据截取完，再截取下十条数据，以此类推
      }
      return result // 7. 最后把结果丢出去即可
    },

    initEchart1() {
      const initEcharts = echarts.init(document.getElementById('main'))

      const option = {
        title: {
          text: '单位(个)',
          textStyle: {
            color: '#70CCFF',
            fontWeight: 'normal',
            fontSize: '14',
          },
        },
        legend: {
          data: ['已交付', '待交付'],
          show: true,
          right: '100',
          itemWidth: 16,
          itemHeight: 6,
          top: '10',
          // 图例文字样式
          textStyle: {
            color: '#fff',
          },
          data: [
            {
              name: '已交付',
              // 图例的图形样式
              itemStyle: {
                color: '#07DDFA',
              },
              // 图例图形中线的样式
              lineStyle: {},
            },
            {
              name: '待交付',
              itemStyle: {
                color: '#FFD15C',
              },
              lineStyle: {
                color: '#FFD15C',
              },
            },
          ],
        },
        //  鼠标移动上去
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            crossStyle: {
              color: '#999',
            },
          },
          valueFormatter: function (value) {
            return value + '个'
          },
        },
        xAxis: {
          type: 'category',
          data: ['新开', '移机', '故障', '超级WIFI组网'],
          // 不显示坐标轴刻度
          axisTick: {
            show: false,
          },
          // 坐标轴线条配置
          axisLine: {
            lineStyle: {
              color: '#fff', // X坐标轴的颜色
              width: '1', //坐标线的宽度
            },
          },
          // 坐标轴刻度 在图表方向 并且不显示
          splitLine: {
            show: false,
          },
          // 坐标轴文字配置
          axisLabel: {
            show: true, // 显示x轴坐标数据
            textStyle: {
              color: '#fff', //内容文字颜色
            },
          },
        },
        yAxis: {
          type: 'value',
          // 不显示坐标轴刻度
          axisTick: {
            show: false,
          },
          // 坐标轴刻度 在图表方向 并且显示
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#999'],
              width: 1,
              type: 'dashed',
            },
          },
          // 坐标轴文字配置
          axisLabel: {
            show: true, // 显示y轴坐标数据
            textStyle: {
              color: 'rgba(255,255,255,0.6)', //Y轴内容文字颜色
            },
          },
          // 坐标轴线条配置
          axisLine: {
            show: false, // 显示y轴轴线
          },
        },
        series: [
          {
            name: '已交付',
            data: [120, 200, 150, 80],
            type: 'bar',
            barWidth: '35',
            barGap: '50%',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              color: '#fff',
            },
            itemStyle: {
              normal: {
                color: '#07DDFA',
              },
            },
          },
          {
            name: '待交付',
            data: [80, 70, 110, 130],
            type: 'bar',
            barWidth: '35',
            barGap: '50%',

            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              color: '#fff',
            },
            itemStyle: {
              normal: {
                color: '#FFD15C',
              },
            },
          },
        ],
      }
      option && initEcharts.setOption(option)
    },

    initEchart() {
      const initEcharts = echarts.init(document.getElementById('main'))

      const option = {
        title: {
          text: '单位(个)',
          textStyle: {
            color: '#70CCFF',
            fontWeight: 'normal',
            fontSize: '14',
          },
        },
        legend: {
          data: ['已交付', '待交付'],
          show: true,
          right: '100',
          itemWidth: 16,
          itemHeight: 6,
          top: '10',
          // 图例文字样式
          textStyle: {
            color: '#fff',
          },
          data: [
            {
              name: '已交付',
              // 图例的图形样式
              itemStyle: {
                color: '#07DDFA',
              },
              // 图例图形中线的样式
              lineStyle: {},
            },
            {
              name: '待交付',
              itemStyle: {
                color: '#FFD15C',
              },
              lineStyle: {
                color: '#FFD15C',
              },
            },
          ],
        },
        //  鼠标移动上去
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            crossStyle: {
              color: '#999',
            },
          },
          valueFormatter: function (value) {
            return value + '个'
          },
        },
        xAxis: {
          type: 'category',
          data: ['新开', '移机', '故障', '超级WIFI组网'],
          // 不显示坐标轴刻度
          axisTick: {
            show: false,
          },
          // 坐标轴线条配置
          axisLine: {
            lineStyle: {
              color: '#fff', // X坐标轴的颜色
              width: '1', //坐标线的宽度
            },
          },
          // 坐标轴刻度 在图表方向 并且不显示
          splitLine: {
            show: false,
          },
          // 坐标轴文字配置
          axisLabel: {
            show: true, // 显示x轴坐标数据
            textStyle: {
              color: '#fff', //内容文字颜色
            },
          },
        },
        yAxis: {
          type: 'value',
          // 不显示坐标轴刻度
          axisTick: {
            show: false,
          },
          // 坐标轴刻度 在图表方向 并且显示
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#999'],
              width: 1,
              type: 'dashed',
            },
          },
          // 坐标轴文字配置
          axisLabel: {
            show: true, // 显示y轴坐标数据
            textStyle: {
              color: 'rgba(255,255,255,0.6)', //Y轴内容文字颜色
            },
          },
          // 坐标轴线条配置
          axisLine: {
            show: false, // 显示y轴轴线
          },
        },
        series: [
          {
            name: '已交付',
            data: [120, 200, 150, 80],
            type: 'bar',
            barWidth: '35',
            // barGap: '50%',
            barWidth: 17, //柱图宽度
            // label: {
            //   show: true,
            //   position: 'top',
            //   formatter: '{c}',
            //   color: '#fff',
            // },
            itemStyle: {
              normal: {
                color: function (params) {
                  console.log('params', params)
                  let colorList = [
                    '#EA5353',
                    '#DB8D4D',
                    '#9DD530',
                    '#38CFCA',
                    '#6C54E2',
                    '#749f83',
                    '#ca8622',
                    '#bda29a',
                    '#6e7074',
                    '#546570',
                  ]
                  return colorList[params.dataIndex]
                },
                barBorderRadius: [0, 0, 0, 180],
              },
            },
            z: 1,
          },
          {
            name: '待交付',
            data: [120, 200, 150, 80],
            type: 'bar',
            barWidth: '35',
            barGap: '50%',
            barWidth: 17, //柱图宽度
            // label: {
            //   show: true,
            //   position: 'top',
            //   formatter: '{c}',
            //   color: '#fff',
            // },
            itemStyle: {
              normal: {
                color: function (params) {
                  console.log('params', params)
                  let colorList = [
                    '#EA5353',
                    '#DB8D4D',
                    '#9DD530',
                    '#38CFCA',
                    '#6C54E2',
                    '#749f83',
                    '#ca8622',
                    '#bda29a',
                    '#6e7074',
                    '#546570',
                  ]
                  return colorList[params.dataIndex]
                },
                barBorderRadius: [0, 0, 0, 180],
              },
            },
            z: 1,
          },
          // {
          //   name: '已交付',
          //   tooltip: {
          //     show: false,
          //   },
          //   type: 'bar',
          //   barWidth: 17,
          //   itemStyle: {
          //     //右面
          //     normal: {
          //       color: function (params) {
          //         let colorList = [
          //           '#FA6363',
          //           '#F1A363',
          //           '#AEE93C',
          //           '#41EBE5',
          //           '#866FF5',
          //           '#749f83',
          //           '#ca8622',
          //           '#bda29a',
          //           '#6e7074',
          //           '#546570',
          //         ]
          //         return colorList[params.dataIndex]
          //       },
          //       barBorderRadius: [0, 0, 180, 0],
          //     },
          //   },
          //   data: [120, 200, 150, 80],
          //   barGap: 0,
          //   z: 2,
          // },
          // {
          //   name: '已交付',
          //   tooltip: {
          //     show: false,
          //   },
          //   type: 'pictorialBar',
          //   itemStyle: {
          //     //顶部
          //     normal: {
          //       color: function (params) {
          //         let colorList = [
          //           '#FC9F9F',
          //           '#F7B177',
          //           '#BBF64A',
          //           '#4DF4EE',
          //           '#947FFA',
          //           '#749f83',
          //           '#ca8622',
          //           '#bda29a',
          //           '#6e7074',
          //           '#546570',
          //         ]
          //         return colorList[params.dataIndex]
          //       },
          //       borderColor: '',
          //       borderWidth: 0.01,
          //       label: {
          //         show: true, //开启显示
          //         position: 'top', //在上方显示
          //         textStyle: {
          //           //数值样式
          //           color: 'black',
          //           fontSize: 16,
          //           fontFamily: '微软雅黑',
          //         },
          //       },
          //     },
          //   },
          //   symbol: 'rect',
          //   symbolRotate: 45,
          //   symbolSize: ['24', '24'],
          //   symbolOffset: ['0', '-11'],
          //   symbolPosition: 'end',
          //   data: [120, 200, 150, 80],
          //   z: 3,
          // },

          // {
          //   name: '待交付',
          //   tooltip: {
          //     show: false,
          //   },
          //   type: 'bar',
          //   barWidth: 17,
          //   itemStyle: {
          //     //右面
          //     normal: {
          //       color: function (params) {
          //         let colorList = [
          //           '#FA6363',
          //           '#F1A363',
          //           '#AEE93C',
          //           '#41EBE5',
          //           '#866FF5',
          //           '#749f83',
          //           '#ca8622',
          //           '#bda29a',
          //           '#6e7074',
          //           '#546570',
          //         ]
          //         return colorList[params.dataIndex]
          //       },
          //       barBorderRadius: [0, 0, 180, 0],
          //     },
          //   },
          //   data: [120, 200, 150, 80],
          //   barGap: 0,
          //   z: 2,
          // },
          // {
          //   name: '待交付',
          //   tooltip: {
          //     show: false,
          //   },
          //   type: 'pictorialBar',
          //   itemStyle: {
          //     //顶部
          //     normal: {
          //       color: function (params) {
          //         let colorList = [
          //           '#FC9F9F',
          //           '#F7B177',
          //           '#BBF64A',
          //           '#4DF4EE',
          //           '#947FFA',
          //           '#749f83',
          //           '#ca8622',
          //           '#bda29a',
          //           '#6e7074',
          //           '#546570',
          //         ]
          //         return colorList[params.dataIndex]
          //       },
          //       borderColor: '',
          //       borderWidth: 0.01,
          //       label: {
          //         show: true, //开启显示
          //         position: 'top', //在上方显示
          //         textStyle: {
          //           //数值样式
          //           color: 'black',
          //           fontSize: 16,
          //           fontFamily: '微软雅黑',
          //         },
          //       },
          //     },
          //   },
          //   symbol: 'rect',
          //   symbolRotate: 45,
          //   symbolSize: ['24', '24'],
          //   symbolOffset: ['0', '-11'],
          //   symbolPosition: 'end',
          //   data: [120, 200, 150, 80],
          //   z: 3,
          // },
        ],
      }
      option && initEcharts.setOption(option)
    },

    clickFun() {
      this.isFullFlag = !this.isFullFlag
      if (!Screenfull.enabled) {
        this.$message({
          message: 'Your browser does not work',
          type: 'warning',
        })
        return false
      }
      Screenfull.toggle()
    },

    // 判断全屏
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
  },
}
</script>

<style scoped lang="scss">
.homes {
  height: 100%;
}
</style>
